<template>
	<view class="withdrawal_wp">
		<view class="withdrawal_number">
			<view class="withdrawal_account">
				<text>提现账户</text>
				<radio-group @change="aradioChange">
					<label class="w_a_choose">
						<radio color="#8405dc" class="w_a_radio" value="0" :checked="acurrent === 0" /><text>个人账户</text>
					</label>
					<label v-if="info.ismerch==1" class="w_a_choose">
						<radio color="#8405dc" class="w_a_radio" value="1" :checked="acurrent === 1" /><text>商户账户</text>
					</label>
				</radio-group>
			</view>
			<view class="withdrawal_number_title">提现金额</view>
			<view class="withdrawal_number_value"><text>￥</text> <input type="number" placeholder="请输入提现金额"
					v-model="money" @input="changeMoney" /></view>
			<view class="withdrawal_message" style="font-size: 34upx;">
				手续费：￥{{servicecharge}}&nbsp;&nbsp;({{info.settrade}}%)</view>
			<view class="withdrawal_message" style="font-size: 30upx;">账户余额：￥{{info.credit}} <text
					@click="qwithdrawal">全部提现</text><text @click="$navTo('/pages/userservice/commission')">提现明细</text></view>
		</view>
		<view class="withdrawal_status">
			<view>提现方式</view>
			<radio-group class="withdrawal_status_item" @change="radioChange">
				<label class="withdrawal_status_label" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio class="withdrawal_status_radio" color="#FF644A" :value="item.value"
							:checked="index === current" />
					</view>
					<view class="withdrawal_status_type">
						<text class="iconfont icon"
							:class="{'icon-weixin':item.value==0,'icon-zhifubao':item.value==1,'icon-yinhangka_mian':item.value==2}"></text>
						<text>{{item.name}}</text>
					</view>
				</label>
			</radio-group>
			<view class="withdrawal_message"><input type="text" v-model="alipayname" placeholder="填写收款人姓名" /></view>
			<view class="withdrawal_message"><input type="text" v-model="alipay" placeholder="填写收账号" /></view>
		</view>

		<view class="reaname_sumbit" @click="onsumbit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
					value: '1',
					name: '支付宝',
					checked: true,
				}],
				acurrent: 0,
				current: 0,

				info: {
					credit: '0.00',
					settrade: 0,
					ismerch: 0,
					alipay: '',
					alipayname: '',
				},

				money: '',
				servicecharge: 0,
				alipay: '',
				alipayname: '',
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.money = '';
				this.$axios('Money/main', 'POST', 'commission', {
					type: this.acurrent
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						this.alipayname = this.info.alipayname;
						this.alipay = this.info.alipay;
					}
				})
			},
			changeMoney() {
				this.money = Math.trunc(this.money);
				console.log(this.money)
				this.servicecharge = this.money * this.info.settrade / 100;
				
			},

			qwithdrawal() {
				this.money = this.info.credit;
				this.servicecharge = this.info.credit * this.info.settrade / 100;
			},
			onsumbit() {
				if (!this.money) {
					this.$api.msg('申请金额为空！')
					return;
				}
				if (this.money * 1 > this.info.credit * 1) {
					this.$api.msg('余额不足！')
					return;
				}
				if (this.alipayname == '' || this.alipay == '') {
					this.$api.msg('请完善收款人信息！')
					return;
				}
				let obj = {
					money: this.money,
					alipay: this.alipay,
					alipayname: this.alipayname,
					sendpay: 1
				}
				this.$axios('Money/submit', 'POST', 'commission', obj).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功！');
						setTimeout(() => {
							this.$navBack();
						}, 1000)
					}
				})
			},
			aradioChange(e) {
				this.acurrent = Number(e.detail.value);
				this.getInfo();
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '/store/icon.css';

	page {
		background-color: #f2f2f2;
		color: $font-color-dark;
	}

	.withdrawal_number {
		background-color: #fff;
		border-top: 1px hsl(0, 0%, 87%) solid;
		padding: 20upx 20upx 0;
	}

	.withdrawal_account {
		display: flex;
		align-items: center;
		padding: 20upx 0;
	}

	.w_a_choose {
		margin: 0 20upx;
	}

	.w_a_radio {
		transform: scale(0.8);
	}

	.withdrawal_number_title {
		border-top: 1px hsl(0, 0%, 87%) solid;
		padding-top: 20upx;
	}

	.withdrawal_number_value {
		display: flex;
		align-items: center;
		padding: 30upx 0;
	}

	.withdrawal_number_value text {
		font-size: 44upx;
		font-weight: bold;
		transform: scaleY(1.1);
		margin-right: 10upx;
	}

	.withdrawal_number_value input {
		font-size: $font-base;
	}

	.withdrawal_message {
		border-top: 1px hsl(0, 0%, 87%) solid;
		color: #222;
		font-size: $font-sm;
		line-height: 60upx;
		padding: 20upx 0;
	}

	.withdrawal_message text {
		color: $base-color;
		margin-left: 30upx;
	}

	.withdrawal_message input {
		color: $font-color-dark;
		font-size: $font-sm;
	}

	.withdrawal_status {
		background-color: #fff;
		margin-top: 20upx;
		padding: 20upx 20upx 0;
	}

	.withdrawal_status_item {
		display: flex;
		align-items: center;
		padding: 30upx 0;
	}

	.withdrawal_status_label,
	.withdrawal_status_type {
		display: flex;
		align-items: center;
	}

	.withdrawal_status_label {
		flex: 1;
	}

	.withdrawal_status_radio {
		transform: scale(0.6);
	}

	.withdrawal_status_type .icon {
		font-size: 40upx;
		margin-right: 10upx;
	}

	.icon-weixin {
		color: #50bb34;
	}

	.icon-zhifubao {
		color: #44a9fd;
	}

	.icon-yinhangka_mian {
		color: #efa03f;
	}

	.reaname_sumbit {
		background-color: $base-color;
		border-radius: 40upx;
		color: #fff;
		font-size: 30upx;
		line-height: 70upx;
		position: fixed;
		bottom: 60upx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		letter-spacing: 3px;
		width: 90%;
	}
</style>